<template>
	<el-card class="desc" shadow="never">
		<template #header>
			<div class="card-header">
				<span>我要评论</span>
			</div>
		</template>

		<div class="comments-section">
			<!-- 添加新评论 -->
			<div class="add-comment">
				<el-rate v-model="state.newComment.star " show-star text-color="#ff9900" />
				<textarea
					v-model="state.newComment.content"
					placeholder="各位，评论区域不是无人区，请留下美好记录"
					class="textarea-field"
				></textarea>
				<button @click="addComment" class="submit-btn">提交评论</button>
			</div>
			<!-- 评论列表 -->
			<div class="comments-list">
				<div v-if="commentsList.length === 0">
					期待您的第一条评论~~~~
				</div>
				<div v-if="commentsList.length > 0 "  class="comment" v-for="(comment, index) in commentsList" :key="index">
					<div class="comment-author">{{ comment.userName }}</div>
					<div class="comment-text">{{ comment.content }}</div>
					<div class="comment-date">
						<el-rate v-model="comment.star " disabled show-star text-color="#ff9900" />
					</div>
				</div>
			</div>
		</div>
	</el-card>
</template>
<script setup lang="ts">
const  emit = defineEmits(['commentInfo'])
const props = defineProps(<any>{
	commentsList: Array, // 接收传递的 hotList 属性，类型为数组
	itemId:String
});
const  state = reactive(<any>{
	newComment: {
		content: "",
		star: 3.5
	},
})

/**
 * 添加评论
 */
function  addComment() {
	if (state.newComment.star && state.newComment.content) {
		emit("commentInfo",state.newComment)

		state.newComment.star = 3.5
		state.newComment.content = ""
	}else {
		toast.warning("请输入评论内容和名字")
	}
}
</script>
<style scoped>
.comments-section {
	width: 100%
}

.comments-list {
	margin-bottom: 20px;
}

.comment {
	background-color: #fff;
	padding: 15px;
	margin-bottom: 10px;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.comment-author {
	font-weight: bold;
	margin-bottom: 5px;
	color: #38556b;
}

.comment-text {
	font-size: 16px;
	margin-bottom: 10px;
	color: #555;
}

.comment-date {
	font-size: 12px;
	color: #aaa;
}

.add-comment {
	padding: 15px;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	margin-bottom: 15px;
}


.textarea-field {
	width: 100%;
	padding: 10px;
	margin-bottom: 10px;
	border-radius: 4px;
	border: 1px solid #ccc;
	font-size: 14px;
}

.textarea-field {
	resize: vertical;
	min-height: 80px;
}

.submit-btn {
	padding: 10px 20px;
	background-color: #0288d1;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s;
}

.submit-btn:hover {
	background-color: #026fa3;
}
</style>
